<script lang="ts" setup>
import PageConfig from "@/module/PageConfig/PageConfig.vue";
import {useStoryStore} from "@/store/admin/Main/StoryStore.ts";
import ImageView from "@/module/image/ImageView.vue";
import router from "@/config/router.ts";

const store = useStoryStore()

async function gotoStoryContext(story){
    store.setStory(story)
    await router.push({path: "/home/story/story-context"})
}
</script>

<template>
  <el-row style="margin-top: 50px;">
      <el-col :span="16" :offset="4">
          <el-card
              class="hand"
              style="margin-top: 20px;"
              v-for="story in store.getTableData()"
              @click="gotoStoryContext(story)"
          >
              <el-row>
                  <el-col :span="8">
                      <image-view v-model="story.img" width="320" height="320"/>
                  </el-col>
                  <el-col :span="16">
                      <el-row>
                          <el-col :span="24">
                              <span style="font-size: 25px">{{story.title}}</span>
                          </el-col>
                          <el-col style="margin-top: 20px;color:#666;" :span="12">
                              <span style="">{{story.name}}</span>
                          </el-col>
                          <el-col style="margin-top: 20px;color:#666;" :span="12">
                              <span style="float: right">{{story.date}}</span>
                          </el-col>
                          <el-col :span="24">
                              <p style="color:#666;">
                                  {{story.text}}
                              </p>
                          </el-col>
                      </el-row>
                  </el-col>
              </el-row>
          </el-card>
      </el-col>
  </el-row>
    <page-config style="text-align: center" v-model="store.pageConfig" @initTable="store.initTableData"/>
</template>

<style scoped>

</style>